<template>
	<div class="wordsDetailBox">
		<AppHeader title="单词详情" :banAnimate="true" backgroundColor="#FFFFFF" titleColor="#000"
			@leftClickEvent="handleHeaderLeft()"></AppHeader>
		<div class="wordBox">
			<div class="voice" @click="playAudio('words')">
				<img src="@/assets/images/brushWords/voice.png" v-if="!voiceStatus" />
				<img src="@/assets/images/brushWords/microphone.gif" v-else />
			</div>
			<div class="words">{{wordsDetail.wordsjson.words}}</div>
			<div class="phoneticSymbol" v-if="wordsDetail.wordsjson.symbol">[{{wordsDetail.wordsjson.symbol}}]
			</div>
			<div class="explain">{{wordsDetail.wordsjson.pretations}}</div>
			<div class="image" v-if="wordsDetail.wordsjson.wordPic">
				<img :src="wordsDetail.wordsjson.wordPic" />
			</div>
			<div class="titleBox" v-if="wordsDetail.wordsjson.sentences">
				<div class="leftBox">
					<div class="block"></div>
					<div class="title">例句</div>
				</div>
			</div>
			<div class="exampleEn" v-if="wordsDetail.wordsjson.sentences">{{wordsDetail.wordsjson.sentences}}
			</div>
			<!-- <div class="exampleZh">我是两天前来这儿的</div> -->
		</div>
		<div class="line"></div>
		<div class="myFollowReading">
			<div class="titleBox">
				<div class="leftBox">
					<div class="block"></div>
					<div class="title">我的跟读</div>
				</div>
				<div class="rightBox" @click="toFollowReading">去练习</div>
			</div>
			<div class="readSpeechBox" v-if="wordsDetail.myvideosource&&wordsDetail.score">
				<div class="voice" @click="playAudio('myVideo')">
					<img src="@/assets/images/brushWords/voice.png" v-if="!myVoiceStatus" />

					<img src="@/assets/images/brushWords/microphone.gif" v-else />
				</div>
				<div class="phoneticSymbol">[{{wordsDetail.wordsjson.symbol}}]</div>
				<div class="score">{{wordsDetail.score}}</div>
			</div>
		</div>
		<div class="fillBox"></div>
		<div class="buttonGround">
			<div class="previous" @click="wordsChange('previous')">上一个</div>
			<div class="next" @click="wordsChange('next')">下一个</div>
		</div>
		<audio ref="audioElement" :src="audioSrc" @ended="playEnded"></audio>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import AppLoading from "@/components/AppLoading.vue";
	import {
		ref,
		nextTick,
		reactive,
		onMounted
	} from "vue";

	import {
		showToast,
	} from "vant";

	//单词切换
	const wordsChange = (type) => {
		playEnded()
		if (type == 'previous') {
			if (wordsIndex.value == 0) {
				showToast('已经是第一个单词了')
			} else {
				wordsIndex.value--
			}
		}

		if (type == 'next') {
			if (wordsIndex.value == (brushWordsList.value.length - 1)) {
				showToast('已经是最后一个单词了')
			} else {
				wordsIndex.value++
			}
		}
		//获取单词详情信息
		getWordsDetail()
	}

	import {
		getWordsInfo
	} from "@/api/brushWords.js";
	const loading = ref(false)
	const wordsDetail = ref({
		wordsjson: {}
	}) //单词详情信息
	const wordsIndex = ref() //当前单词索引
	const brushWordsList = ref([]) //刷单词列表
	//获取单词详情信息
	const getWordsDetail = () => {
		getWordsInfo({
			id: brushWordsList.value[wordsIndex.value]
		}).then(res => {
			loading.value = false
			wordsDetail.value = res.data
			localStorage.setItem("currentBrushWords", brushWordsList.value[wordsIndex.value]);
		})
	}

	const audioSrc = ref('') //音频资源文件
	const voiceStatus = ref(false) //声音状态是否播放中
	const myVoiceStatus = ref(false) //个人声音状态是否播放中

	const audioElement = ref(null) //音频dom
	// 播放音频
	const playAudio = async (type) => {
		if (type == 'words') {
			voiceStatus.value = true
			audioSrc.value = wordsDetail.value.wordsjson.wordFile
		} else {
			myVoiceStatus.value = true
			audioSrc.value = wordsDetail.value.myvideosource_domain
		}
		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}
	//播放结束
	const playEnded = async () => {
		if (audioElement.value) {
			await audioElement.value.pause()
		}
		voiceStatus.value = false
		myVoiceStatus.value = false
	}

	//路由信息
	import {
		useRouter,
		useRoute
	} from "vue-router";
	const route = useRoute();
	const router = useRouter();
	import {
		validateAuthAudio
	} from "@/utils/dateFormat"
	//跳转去练习
	const toFollowReading = () => {
		// validateAuthAudio().then(isAuthorized => {
		// 	if (isAuthorized) {
		localStorage.setItem("brushWordsSelect", JSON.stringify([brushWordsList.value[wordsIndex
			.value]]));
		router.push({
			path: '/brushWords/followReading',
			query: {
				type: 'detail'
			}
		})
		// 	} else {
		// 		console.log('录音权限未授权');
		// 		// 你可以在这里处理未授权的情况  
		// 	}
		// }).catch(error => {
		// 	// 处理任何可能抛出的错误（通常来自 reject 的部分）  
		// 	console.error('处理 validateAuthAudio 函数时出错', error);
		// });
	}
	//返回上一页
	const handleHeaderLeft = () => {
		router.go(-1);
	};

	onMounted(() => {
		//获取刷新单词列表
		let brushWords = localStorage.getItem("brushWordsList");
		let currentWords = localStorage.getItem("currentBrushWords");

		//当前单词在刷新列表里的索引
		brushWordsList.value = JSON.parse(brushWords)
		wordsIndex.value = brushWordsList.value.indexOf(+currentWords)

		//获取单词详情信息
		loading.value = true
		getWordsDetail()
	})
</script>

<style lang="scss" scoped>
	.fillBox {
		height: 100px;
	}

	.buttonGround {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
		height: 65px;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.previous {
			width: 170px;
			height: 45px;
			border-radius: 23px;
			border: 1px solid #8E8E8E;
			text-align: center;
			font-size: 18px;
			color: #333333;
			line-height: 45px;
		}

		.next {
			width: 170px;
			height: 45px;
			background: linear-gradient(270deg, #29F19C 0%, #02A1F9 100%);
			border-radius: 23px;
			font-size: 18px;
			color: #FFFFFF;
			text-align: center;
			line-height: 45px;
		}
	}

	.wordsDetailBox {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;

		.wordBox {
			padding: 54px 10px 15px;
			display: flex;
			flex-direction: column;



			.words {
				text-align: center;
				font-size: 32px;
				font-weight: bold;
				color: #333333;
			}

			.phoneticSymbol {
				margin-top: 10px;
				text-align: center;
				font-size: 18px;
				color: #8E8E8E;
			}

			.explain {
				margin-top: 15px;
				text-align: center;
				font-size: 18px;
				color: #8E8E8E;
			}

			.image {
				width: 320px;
				height: 180px;
				margin: 30px auto 0px;
				background: #D8D8D8;
				border-radius: 10px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.exampleEn,
			.exampleZh {
				margin: 10px 18px 0;
				font-size: 16px;
				color: #333333;
				font-weight: bold;
			}
		}

		.myFollowReading {
			margin: 0 10px;

			.readSpeechBox {
				margin: 10px 18px 0;
				display: flex;
				align-items: center;
				font-size: 16px;
				color: #333333;

				.phoneticSymbol {
					font-weight: bold;
					margin-left: 10px;
					flex: 1;
				}

				.score {
					font-weight: bold;
				}
			}
		}

		.voice {
			width: 20px;
			height: 20px;
			align-self: flex-end;
			display: flex;
			align-items: center;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.titleBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 15px 18px 0;

			.leftBox {
				display: flex;
				align-items: center;

				.block {
					width: 4px;
					height: 14px;
					background: #0CB76C;
				}

				.title {
					font-size: 16px;
					color: #8E8E8E;
					margin-left: 5px;
				}
			}

			.rightBox {
				font-size: 16px;
				color: #8E8E8E;
			}

		}

		.line {
			width: 100%;
			height: 1px;
			margin-top: 5px;
			background: #E5E5E5;
		}
	}
</style>